<template>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>进程信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" size="small" plain @click="handleFresh()">刷新数据</el-button>
        </div>
        <div  class="text item">
            <el-table :data="processInfo" style="width: 100%">
                <el-table-column
                        prop="pid"
                        label="进程ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="进程名称"
                        width="280">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="cpu"
                        label="处理器(%)"
                        width="180" >
                </el-table-column>
                <el-table-column
                        prop="mem.usage"
                        label="内存(%)"
                        width="180" >
                </el-table-column>
                <el-table-column width="80" label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">停止</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>

<script>
    import { ipcRenderer } from "electron";
    export default {
        created() {
            this.getProcessInfo();
        },
        data() {
            return {
                processInfo: [],
            }
        },
        methods: {
            handleFresh() {
                this.processInfo=null;
                this.getProcessInfo()
            },
            getProcessInfo() {
                ipcRenderer.invoke("getProcessInfo").then(res => {
                    res.forEach((v,i)=>{
                        v.mem.usage =  v.mem.usage.toFixed(0)
                    })
                    console.log(res)
                    this.processInfo = res;
                });
            }
        }
    }
</script>
